<template>
    <div>
        <video id="videopic" :src="video" width="30%" height="30%" controls autoplay v-if="video" muted></video>
        <Button color='red' @click="changepic">{{mybutton}}</Button>
        
        <table>
            <tr>
                <td>七牛云上传:</td>
                <td><input type="file" @change='upload_qiniu'></td>
            </tr>
            <tr>
                
                <td>
                    标题：{{$t('m.title')}}
                </td>
                <td>
                    简介：{{$t('m.jianjie')}}
                </td>
            </tr>
            <tr>
                <h-switch v-model="lang" @change='langchange'>中/英</h-switch>
            </tr>
        </table>
    </div>
</template>


<script>
export default {
    name:'kaoshi',
    data() {
        return {
            qiniu_token:'',
            video:'',
            mybutton:'进入画中画',
            //语言变量
            lang:false,
            video:'',
        }
    },
    mounted() {
        this.get_uptoken()
        //获取用户已上传视频
		this.axios({
			url:'http://127.0.0.1:8000/userinfo1/',
			params:{
				uid:localStorage.getItem("uid"),
				jwt:localStorage.getItem("jwt1"),
			}
		}).then(resp=>{
			this.video = 'http://q79ixndz4.bkt.clouddn.com/'+resp.data.img
		})
    },
    methods: {
        //定义画中画切换
		changepic(){
			//判断是否处于画中画状态，这里用的是id选择器
			if (videopic !==  document.pictureInPictureElement) {
				//尝试进入画中画
				videopic.requestPictureInPicture()
				this.mybutton = '退出画中画'
			}else{
				//退出画中画
				document.exitPictureInPicture()
				this.mybutton = '进入画中画'
			}
		},
        //获取凭证
		get_uptoken(){
			this.axios({
				url:'http://127.0.0.1:8000/qiniu_ks/'
			}).then(resp=>{
				console.log(resp)
				this.qiniu_token = resp.data.token
				console.log(this.qiniu_token)
				
			})
        },
        upload_qiniu(e){
			//获取文件对象
			let file = e.target.files[0];
			//截取文件后缀名
			let suffix = file.name.split(".").pop()
			//声明参数
			let param = new FormData();
			//添加文件&上传凭证
			param.append("token",this.qiniu_token)
			param.append('file',file,file.name);
			//声明请求头
			let config = {
				headers:{'Content-Type':'multipart/form-data'}
			}
				//定制化axios
				//七牛上传强制要求不能携带cookie，因此定制化axios保险起见，声明不携带cookie
				const axios_qiniu = this.axios.create({withCredentials:false})
				axios_qiniu({
					method:"POST",
					url:'http://up-z1.qiniu.com/',
					data:param,
					timeout:30000,
				}).then(resp=>{
					console.log(resp)
                    this.video = 'http://q79ixndz4.bkt.clouddn.com/'+resp.data.key
                    //发送请求
                    this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem("uid"),img:resp.data.key}}).then((resp) =>{
                            console.log(resp);
                            localStorage.setItem('jwt1',resp.data.jwt)
                            });
				})
        },
        //语言切换事件
        langchange(){
            console.log(this.lang);
            if (this.lang == true) {
                this.$i18n.locale = 'en';
                localStorage.setItem("lang",'en')
            }else{
                this.$i18n.locale = 'cn';
                localStorage.setItem("lang",'cn')
            }
        },
    },
}
</script>


<style>

</style>